<template>
  <a-modal 
    :visible="visible"
    :title="title"
    okText="确定" 
    cancelText="取消"
    :maskClosable="false"
    :destroyOnClose="true"
    :keyboard="false"
    @cancel="closeModal()"
    @ok="handleSubmit"
    width="1000px">
    <SearchFormTable :url="url" ref="searchtable" :defaultParams="defaultParams" :columns="columns" :form="form" 
      :isApiSearch="true"
      :defaultSelectedRowKeys="allSelectedKeys"
      @allSelectedKeys="handleSelectedRowChange">
      <template slot="searchForm">
        <a-form layout="inline" :form="form">
          <a-form-item label="商品名称">
            <a-input
              style="width:180px"
              v-decorator="[
                'goodsName',
              ]"
              placeholder="请输入商品名称"
            >
            </a-input>
          </a-form-item>
          <a-form-item label="商品分类">
            <a-tree-select
              allowClear
              style="width:180px"
              :replaceFields="{children:'children', title:'classifyName', key:'id', value: 'id' }"
              v-decorator="[
                'goodsClassificationId',
              ]"
              :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
              :tree-data="productClassifyList"
              placeholder="请选择"
              tree-default-expand-all
              >
              <span slot="title" slot-scope="{ value }">
                  {{ value }}
              </span>
            </a-tree-select>
          </a-form-item>
          <a-form-item label="商品分组">
            <a-tree-select
                allowClear
                style="width:180px"
                :replaceFields="{children:'children', title:'groupName', key:'id', value: 'id' }"
                v-decorator="[
                  'goodsGroupId',
                ]"
                :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
                :tree-data="productGroupList"
                placeholder="请选择"
                tree-default-expand-all
                >
                <span slot="title" slot-scope="{ value }">
                    {{ value }}
                </span>
            </a-tree-select>
          </a-form-item>
        </a-form>
      </template>
    </SearchFormTable>
  </a-modal>
</template>
<script>
import SearchFormTable from './SearchFormTable';
import deepCopy from '@/utils/deepCopy';

export default {
  components:{
    SearchFormTable
  },
  props: {
    visible:{
      type:Boolean,
      default:false,
    },
    selectedKeys:{
      type:Array,
      default(){
        return [];
      }
    }
  },
  computed:{
    title(){
      return '商品列表';
    }
  },
  data () {
    return {
      url:'/goods/page',
      form: this.$form.createForm(this, { name: 'table_search' }),
      productClassifyList:[],//商品类型
      goodsStatusList:[
        {
          label:'仓库中',
          value:1
        },{
          label:'上架',
          value:2
        },{
          label:'已下架',
          value:3
        },
      ],
      columns:[
        {
          title: '商品名称',
          dataIndex: 'goodsName',
          key: 'goodsName',
          customRender: (text, row) => {
            return <div class="product_td"><table-img src={row.goodsPicture}/><div class="product_name">{text}</div></div>
          }
        },
        {
          title: '价格',
          dataIndex: 'salePrice',
          key: 'salePrice',
          customRender:(text,row)=>{
            return ((text||0)/100).toFixed(2);
          }
        },
        {
          title: '总可售库存',
          dataIndex: 'goodsInventoryTotal',
          key: 'goodsInventoryTotal'
        },
        {
          title: '销量',
          dataIndex: 'realSales',
          key: 'realSales'
        },
        {
          title: '状态',
          dataIndex: 'goodsStatus',
          key: 'goodsStatus',
          customRender:(text,row)=>{            
            return (this.getStatusLabelByStatusValue(text) || {}).label;
          }
        },
        {
          title: '商品分类',
          dataIndex: 'goodsClassificationName',
          key: 'goodsClassificationName'
        },
        {
          title: '创建时间',
          dataIndex: 'createDate',
          key: 'createDate'
        },
      ],
      productGroupList:[],
      defaultParams:{
        goodsStatus:2,
        marketingType:1// 2021/11/18
      },
      allSelectedKeys:[],
    }
  },
  watch: {
    visible(newVal){
      if(newVal){
        this.getProductGroup();
        this.getProductClassify();
        this.allSelectedKeys=deepCopy(this.selectedKeys);
        console.log('this.selectedKeys',this.selectedKeys)
      }
    }
  },
  created(){
  },
  mounted () {
  },
  methods: {
    closeModal (freshTable) {
      this.$emit('cancel', freshTable)
    },
    //商品分类
    async getProductClassify(){
      let res=await this.$get('/goods/classify/tree',{
        //shopId:this.userInfo.shopId || ''
      });
      if(res && res.returnCode=='1000'){
        this.productClassifyList=res.dataInfo || [];
      }
      else {
        this.productClassifyList=[];
      }
    },
    //商品分组
    async getProductGroup(){
      let res=await this.$get('/goods/group/tree',{
        //shopId:this.userInfo.shopId || ''
      },false,true);
      if(res && res.returnCode=='1000'){
        this.productGroupList=res.dataInfo || [];
      }
      else {
        this.productGroupList=[];
      }
    },
    getStatusLabelByStatusValue(value){
      return this.goodsStatusList.find(item=>{
        return item.value==value;
      })
    },
    handleSelectedRowChange(selectedKeys){
      //console.log('selectedKeys',selectedKeys)
      this.allSelectedKeys=selectedKeys;
    },
    handleSubmit(){
      // let selectedKeys=this.$refs.searchtable.selectedRowKeys || [];
      // console.log('selectedKeys',selectedKeys)
      this.$emit('submit',this.allSelectedKeys);
    }
  }
}
</script>

<style lang="less" scoped>

</style>
